<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Material Design风格下拉菜单jquery插件-php中文网</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
	<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="dist/menu.min.css" type="text/css">
	<style type="text/css">
	  *, *:before, *:after {
	    box-sizing: border-box;
	  }
	  body {
	    font-family: 'PT Sans Narrow', sans-serif;
	  }
	  .toggle {
	    color: #fff;
	    display: block;
	    float: left;
	    height: 72px;
	    line-height: 72px;
	    text-align: center;
	    width: 72px;
	  }
	  .right {
	    float: right
	  }
	  </style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>Material Design风格下拉菜单jquery插件 <span>Material Design Dropdown Menu Plugin For jQuery</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://php.cn/" title="php中文网" target="_blank"><span> php中文网</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://php.cnl" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">
			<a href="javascript:;" class="toggle" id="menu-toggle1">
			    <i class="material-icons">more_vert</i>
			  </a>

			  <h3 style="text-align: center;">←  点击左右两侧的按钮查看效果。→</h3>

			  <a href="javascript:;" class="toggle right" id="menu-toggle2">
			    <i class="material-icons">more_vert</i>
			  </a>

			  <ul
			    class="menu"
			    data-menu
			    data-menu-toggle="#menu-toggle1, #menu-toggle2"
			  >
			    <li>
			      <a href="#">Duis aute irure dolor</a>
			    </li>
			    <li class="menu-separator"></li>
			    <li>
			      <a href="#">Lorem ipsum dolor sit amet</a>
			    </li>
			    <li>
			      <a href="#">Consectetur adipisicing elit</a>
			    </li>
			    <li>
			      <a href="#">Tempor incididunt ut</a>
			    </li>
			    <li class="menu-separator"></li>
			    <li>
			      <a href="#">Excepteur sint</a>
			    </li>
			  </ul>
		</div>
		
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="dist/menu.min.js"></script>
  	<script>$('[data-menu]').menu();</script>
</body>
</html>